Robuust Laden van Hulpbronnen in React: Error Boundaries met Hooks Beheersen

In moderne webapplicaties is het asynchroon laden van hulpbronnen een gangbare praktijk. Of het nu gaat om het ophalen van data van een API, het laden van afbeeldingen of het importeren van modules, het correct afhandelen van potentiële fouten tijdens het laden van hulpbronnen is cruciaal voor een soepele gebruikerservaring. React Error Boundaries bieden een mechanisme om JavaScript-fouten overal in hun onderliggende componentenboom op te vangen, deze fouten te loggen en een terugval-UI (fallback UI) weer te geven in plaats van de hele applicatie te laten crashen. Dit artikel onderzoekt hoe u Error Boundaries effectief kunt gebruiken in combinatie met React Hooks om fouten bij het laden van hulpbronnen te beheren.

Error Boundaries Begrijpen

Vóór React 16 konden onafgehandelde JavaScript-fouten tijdens het renderen van componenten de interne staat van React corrumperen en cryptische fouten veroorzaken bij volgende renders. Error Boundaries lossen dit op door te fungeren als 'catch-all' blokken voor fouten die optreden in hun onderliggende componenten. Het zijn React-componenten die een of beide van de volgende lifecycle-methoden implementeren:

• static getDerivedStateFromError(error): Deze statische methode wordt aangeroepen nadat een fout is opgetreden in een onderliggend component. Het ontvangt de opgetreden fout als argument en retourneert een waarde om de staat van het component bij te werken.
• componentDidCatch(error, info): Deze lifecycle-methode wordt aangeroepen nadat een fout is opgetreden in een onderliggend component. Het ontvangt de opgetreden fout als argument, evenals een object met informatie over welk component de fout heeft veroorzaakt. U kunt dit gebruiken om foutinformatie te loggen.

Belangrijk is dat Error Boundaries alleen fouten opvangen in de renderfase, in lifecycle-methoden en in constructors van de hele boom eronder. Ze vangen geen fouten op voor:

• Event handlers (lees meer in de sectie hieronder)
• Asynchrone code (bijv. setTimeout of requestAnimationFrame callbacks)
• Server-side rendering
• Fouten die in de Error Boundary zelf worden gegooid (in plaats van in de onderliggende componenten)

Error Boundaries en React Hooks: Een Krachtige Combinatie

Hoewel class-componenten traditioneel werden gebruikt om Error Boundaries te implementeren, bieden React Hooks een beknoptere en functionelere aanpak. We kunnen een herbruikbare useErrorBoundary hook maken die de logica voor foutafhandeling inkapselt en een handige manier biedt om componenten te wrappen die mogelijk fouten veroorzaken tijdens het laden van hulpbronnen.

Een Aangepaste useErrorBoundary Hook Maken

Hier is een voorbeeld van een useErrorBoundary hook:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
Er is een fout opgetreden: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Uitleg:

• useState: We gebruiken useState om de foutstatus te beheren. De fout wordt aanvankelijk op null gezet.
• useCallback: We gebruiken useCallback om de functies resetError en captureError te memoïseren. Dit is een goede gewoonte om onnodige re-renders te voorkomen als deze functies als props worden doorgegeven.
• ErrorBoundary Component: Dit is een functioneel component gemaakt met useCallback dat children en een optionele fallback prop accepteert. Als er een fout in de staat aanwezig is, rendert het ofwel het opgegeven fallback component of een standaard foutmelding. Anders rendert het de children. Dit fungeert als onze Error Boundary. De dependency array `[error]` zorgt ervoor dat het opnieuw rendert wanneer de `error`-staat verandert.
• captureError Functie: Deze functie wordt gebruikt om de foutstatus in te stellen. U roept deze aan binnen een try...catch blok bij het laden van hulpbronnen.
• resetError Functie: Deze functie wist de foutstatus, waardoor het component zijn children opnieuw kan renderen (en mogelijk de laadpoging van de hulpbron opnieuw kan proberen).

Hulpbronnen Laden met Foutafhandeling Implementeren

Laten we nu kijken hoe we deze hook kunnen gebruiken om laadfouten van hulpbronnen af te handelen. Beschouw een component dat gebruikersgegevens ophaalt van een API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP-fout! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Kon gebruikersdata niet laden. Opnieuw proberen